<template>
	<ma-body>
		<ma-refresh slot="content" :safeBottom="true" @scroll="scroll">
			<image src="../../static/img/metaBg.png" mode="aspectFill" class="bg-img"></image>
			<image src="../../static/img/metaRadius.png" class="bounce" mode="widthFix" style="width: 4.27vw;position: absolute;right: 5.33vw;top: 97.33vw;"></image>
			<div style="position: relative;">
				<div class="video-box">
					<video :src="videoUrl[0].img" class="video" autoplay="true" id="aotuVideo" loop="true" :poster="videoUrl[0].img+ '?vframe/jpg/offset/1' "></video>
				</div>
				
				<div class="title-box">
					<!-- <span class="line"></span>
					<div class="text-box">
						<span class="jiu-font48-fff">MatartLand元宇宙</span>
						<span class="jiu-font48-fff">创世在即</span>
						<span class="bottom-text">
							<label class="jiu-font24-555" style="color: #A972FF;">准入通行证开放预约中</label>
							<image src="../../static/img/enterMeta.png" mode="heightFix" style="height: 4.27vw;"></image>
						</span>
					</div> -->
					<image src="/static/img/metaTitle.png" mode="widthFix" style="width: 67vw;"></image>
				</div>
				
				<div class="btn-box">
					<span class="now-btn jiu-font28-aaa pulse-one" @tap="yuyue" v-show="false">{{ user.access_token ? '已预约' : '立即预约' }}</span>
					<div class="btn-text">
						<span style="font-size: 3.2vw;font-weight: 300;color: #000000;display: block;">已注册人数</span>
						<u-count-to :endVal="endVal" separator=","></u-count-to>
					</div>
				</div>
				
				<block v-if="user.access_token != null">
					<div class="vip-box">
						<image src="../../static/img/metaTitleTwo.png" mode="widthFix" style="width: 47vw;"></image>
					</div>
					
					<image src="../../static/img/erweima.jpg" mode="aspectFill" class="gzh-img"></image>
				</block>
				
				<div class="vip-box">
					<!-- <span class="vip-line"></span>
					<div class="vip-text">
						<span class="jiu-font24-555" style="color: #FFFFFF;">MatartLand</span>
						<span style="margin-top: 1.07vw;" class="jiu-font32-fff">元宇宙通行证专享权益</span>
					</div> -->
					<image src="../../static/img/metaTitleThree.png" mode="widthFix" style="width: 47vw;"></image>
				</div>
				
				<div class="img-box" style="display: flex;flex-wrap: wrap;padding-left: 4.33vw;">
					<image v-for="item in imgList" :src="item" mode="widthFix" style="width: 43.14vw;height: 47.13vw;display: block;margin-right: 2.67vw;"></image>
				</div>
				
				<div class="meta-bottom">
					<span class="bottom-text" style="opacity: 0.6;">九歌灵藏Matartist</span>
					<span class="bottom-line"></span>
				</div>
			</div>
			<div style="display: flex;flex-direction: column;justify-content: center;margin-top: 10vw;margin-bottom: 3.2vw;">
				<span class="jiu-font24-555" style="text-align: center;">Copyright &copy; 2022</span>
				<span class="jiu-font24-555" style="text-align: center;">九歌（广州）文化科技有限公司 </span>
				<span class="jiu-font24-555" style="text-align: center;" @tap="toBei">粤ICP备2022094854号</span>
				<!-- <span class="jiu-font24-555" style="text-align: center;">联系方式 17688486610</span> -->
			</div>
		</ma-refresh>
	</ma-body>
</template>

<script>
	export default{
		data(){
			return{
				imgList: [
					'/static/img/metaOne.png',
					'/static/img/metaTwo.png',
					'/static/img/metaThree.png',
					'/static/img/metaFour.png',
					'/static/img/metaFive.png',
					'/static/img/metaSix.png'
				],
				yuText: '',
				videoHeight: 0,
				videoContext: null,
				endVal: 5000,
				videoUrl: []
			}
		},
		methods:{
			toBei(){
				window.location.href = "http://www.beian.miit.gov.cn/"
			},
			async yuyue(){
				if(this.user.access_token != null) this.yuText = '已预约';
				else {
					this.yuText = '立即预约';
					let res = await this.$u.api.onRegisterTotal();
					this.endVal += res;
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
			scroll(e){
				if(e.detail.scrollTop > this.videoHeight){
					this.videoContext.pause();
				}else if(e.detail.scrollTop <= this.videoHeight){
					this.videoContext.play();
				}
			},
			async getBannerList(){
				let res = await this.$u.api.getBannerList({
					bannerType: 'register_video'
				});
				this.videoUrl = res;
			}
		},
		async onLoad() {
			// uni.hideTabBar();
			let res = await this.$u.api.onRegisterTotal();
			this.endVal += res;
			this.getBannerList();
			this.$nextTick(res=>{
				const query = uni.createSelectorQuery().in(this).select(".video-box"); //创建查询请求，根据选择器选择第一个video节点
				query.boundingClientRect(data => { //获取布局位置和尺寸
				this.videoHeight = data.height;
				}).exec()
				this.videoContext = uni.createVideoContext('aotuVideo');
				this.videoContext.play();
			})
			
		},
	}
</script>

<style lang="scss">
	/deep/.safeBottom{
		height: 3.2vw !important;
	}
	@font-face{
	  font-family: "bold";
	  src: url("https://img.hetongxue.cc/2022/05/31/cd8417f63b9941c5ad6993baf339f62e.otf");
	  // src: url("https://img.hetongxue.cc/2022/05/31/004702f9c0d64e94a67f98e9f28f158e.otf");
	 }
	 @font-face{
	  font-family: "normal";
	  // src: url("https://img.hetongxue.cc/2022/05/31/cd8417f63b9941c5ad6993baf339f62e.otf");
	  src: url("https://img.hetongxue.cc/2022/05/31/004702f9c0d64e94a67f98e9f28f158e.otf");
	 }
	@keyframes bounce {
	  from,
	  20%,
	  53%,
	  to {
	    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	  }
	
	  40%,
	  43% {
	    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
	    transform: translate3d(0, -30px, 0) scaleY(1.1);
	  }
	
	  70% {
	    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
	    transform: translate3d(0, -15px, 0) scaleY(1.05);
	  }
	
	  80% {
	    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
	    transform: translate3d(0, 0, 0) scaleY(0.95);
	  }
	
	  90% {
	    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
	    transform: translate3d(0, -4px, 0) scaleY(1.02);
	  }
	}
	.bounce {
	 animation: bounce 2s ease-in-out infinite;
	 display: block;
	}
	/deep/.u-count-num{
		font-size: 10.53vw !important;
		color: #222222 !important;
		// font-weight: 700 !important;
		font-family: 'bold';
	}
	.gzh-img{
		margin-top: 4.27vw;
		width: 32vw;
		height: 32vw;
		border-radius: 2.13vw;
		margin-left: 9.6vw;
		margin-bottom: 8.53vw;
	}
	.bg-img {
		position: absolute;
		top: 13vw;
		width: 100vw;
		height: 233.21vw;
	}

	.video-box {
		padding: 4.27vw;
		padding-bottom: 0;

		.video {
			width: 91.47vw;
			height: 51.47vw;
			border-radius: 4.27vw;
			backface-visibility: hidden;
			transform: translate3d(0, 0, 0);
		}
	}

	.title-box {
		display: flex;
		padding-left: 5.33vw;
		margin-top: 8.53vw;

		.line {
			display: block;
			width: 1.07vw;
			height: 24.53vw;
			border-radius: 12.8vw;
			background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
		}

		.text-box {
			display: flex;
			flex-direction: column;
			margin-left: 3.2vw;

			.jiu-font48-fff {
				font-size: 7.2vw;
			}
		}

		.bottom-text {
			margin-top: 1.07vw;
			display: flex;
			align-items: center;
			opacity: 0.6;
		}
	}

	.btn-box{
		margin-top: 26.07vw;
		padding: 0 5.33vw;
		display: flex;
		justify-content: flex-end;
		z-index: 3;
		text-align: end;
		margin-bottom: 7.73vw;
		.now-btn{
			display: flex;
			align-items: center;
			padding: 0 13.87vw;
			height: 12.8vw;
			border-radius: 6.4vw;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
			color: #000000;
			font-weight: 500;
		}
		.btn-text{
			margin-top: 8.53vw;
			display: flex;
			flex-direction: column;
		}
	}

	.vip-box{
		display: flex;
		padding: 0 5.33vw;
		.vip-line{
			width: 1.07vw;
			height: 11.47vw;
			background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
			border-radius: 12.8vw;
			display: block;
			margin-right: 3.2vw;
		}
		.vip-text{
			display: flex;
			flex-direction: column;
		}
	}

	.img-box{
		margin-top: 4.27vw;
		padding-left: 5.33vw;
	}
	
	.meta-bottom{
		margin-top: 21.07vw;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		position: relative;
		height: 25vw;
		overflow: hidden;
		.bottom-text{
			font-size: 3.2vw;
			font-weight: 300;
			color: #BBBBBB;
			margin-bottom: 20.53vw;
		}
		.bottom-line{
			// display: none;
			position: absolute;
			bottom: -8.27vw;
			text-align: center;
			width: 0.53vw;
			height: 24.53vw;
			border-radius: 12.8vw;
			background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
		}
	}
</style>
